<nz-card [nzTitle]="titleTemplate">
  <nz-empty *ngIf="tableDetails?.length <= 0; else notHasValues"
            [nzNotFoundContent]="contentTemplate"
            [nzNotFoundFooter]="footerTemplate">
    <ng-template #contentTemplate>
    </ng-template>
    <ng-template #footerTemplate>
    </ng-template>
  </nz-empty>
  <ng-template #notHasValues>
    <div class="table-body-flex">
      <nz-table #basicTable [nzData]="tableDetails" nzSize="small" nzTableLayout="fixed">
        <thead>
        <tr>
          <th nzEllipsis>{{'common.id' | translate}}</th>
          <th nzEllipsis>{{'common.server' | translate}}</th>
          <th nzEllipsis>{{'common.state' | translate}}</th>
          <th nzEllipsis>{{'common.start' | translate}}{{'common.time' | translate}}</th>
          <th nzEllipsis>{{'common.end' | translate}}{{'common.time' | translate}}</th>
          <th nzEllipsis>{{'common.elapsed' | translate}}{{'common.time' | translate}} (ms)</th>
          <th nzEllipsis>{{'common.action' | translate}}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of basicTable.data" style="{{data.state ? 'color: #F50;': ''}}">
          <td nzEllipsis>{{data.id}}</td>
          <td nzEllipsis>{{data.server}}</td>
          <td nzEllipsis>{{data.state}}</td>
          <td nzEllipsis>
            <span nz-tooltip nzTooltipPlacement="topLeft"
                  nzTooltipTitle="{{data.startTime|amDateFormat:'YYYY-MM-DD HH:mm:ss'}}">
              {{data.startTime|amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
            </span>
          </td>
          <td nzEllipsis>
            <span nz-tooltip nzTooltipPlacement="topLeft"
                  nzTooltipTitle="{{data.endTime|amDateFormat:'YYYY-MM-DD HH:mm:ss'}}">
              {{data.endTime|amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
            </span>
          </td>
          <td nzEllipsis>{{data.elapsedTime}}</td>
          <td>
            <button nz-button nzShape="circle" nzSize="small" nzType="primary"
                    nz-tooltip nzTooltipTitle="{{'common.ddl' | translate}}"
                    (click)="handlerShowDDL(data)">
              <i class="fa fa-search"></i>
            </button>
            <button nz-button nzShape="circle" nzSize="small" nzType="dashed"
                    nz-tooltip nzTooltipTitle="{{'common.quote' | translate}}"
                    [routerLink]="['/query/query']" [queryParams]="{id: data.id}">
              <i class="fa fa-reply-all"></i>
            </button>
            <button nz-button nzShape="circle" nzSize="small" nzType="dashed" nzDanger
                    nz-tooltip nzTooltipTitle="{{'common.error' | translate}}"
                    [disabled]="data?.state !== 1"
                    (click)="handlerShowMessage(data)">
              <i class="fa fa-warning"></i>
            </button>
            <button nz-button nzShape="circle" nzSize="small" nzDanger
                    nz-popconfirm nzPopconfirmTitle="Are you sure?" [nzPopconfirmShowArrow]="false"
                    nz-tooltip nzTooltipTitle="{{'common.delete' | translate}}"
                    [nzCancelText]="'common.cancel'|translate"
                    [nzOkText]="'common.ok'|translate"
                    (nzOnConfirm)="handlerDelete(data.id)">
              <i class="fa fa-trash"></i>
            </button>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </ng-template>
</nz-card>
<ng-template #titleTemplate>
  <i class="fa fa-history"></i>&nbsp;{{'common.query' | translate}} {{'common.history' | translate}}
  <button style="float: right;" nz-button nzType="primary" nzDanger nzSize="small"
          [disabled]="tableDetails?.length <= 0" (click)="handlerClearHistory()">
    <i class="fa fa-trash"></i>&nbsp;{{'common.clear' | translate}} {{'common.history' | translate}}
  </button>
</ng-template>
<app-component-ddl-query [visible]="disabled.dialog" [text]="queryDDL"
                         (emitter)="handlerCloseModal()">
</app-component-ddl-query>
